<template>
	<view class="course-list" @click="navgateTo(courceInfo)">
		<view class="course-card">
			<view class="course-img">
				<img :src="this.imgSrc" alt="">
			</view>
			<view class="card-content">
				<view class="course-name">
					{{courceInfo.name}}
				</view>
				<view class="course-info">
					<view class="course-subject">
						学科：{{courceInfo.subjectName}}
					</view>
					<view class="course-time">
						时间：{{courceInfo.createTime}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgSrc: ''
			};
		},
		props: {
			courceInfo: {

			}
		},
		created() {
			this.imgSrc =
				`${this.$store.state.base_url}/system/loadImg?imgPath=${encodeURI(this.courceInfo.photo)}&accessToken=${this.$store.state.access_token}`
		},
		watch: {
			courceInfo(newVal, oldVal) {
				console.log(newVal);
			},
			deep: true,
			immediate: true,
		},
		methods: {
			navgateTo(data) {
				this.$u.route('pages/course/courseDetail/courseDetail', {
					name: data.name,
					id: data.id
				});
			}
		}
	}
</script>

<style lang="scss">
	.course-list {
		display: flex;
		flex-direction: column;

		.course-card {
			background-color: white;
			display: flex;
			padding: 10rpx;
			margin: 10rpx;
			box-sizing: border-box;
			box-shadow: 0 0 5rpx 1rpx rgba($color: #000000, $alpha: 0.1);
			border-radius: 5rpx;

			.course-img {
				width: 130rpx;
				height: 130rpx;
				border-radius: 15rpx;
				overflow: hidden;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.card-content {
				box-sizing: border-box;
				padding-left: 15rpx;

				.course-name {
					font-weight: bold;
				}

				.course-info {
					color: gray;
					font-size: 15rpx;
					margin-top: 30rpx;
				}
			}
		}
	}
</style>
